<!-- Dom模板 -->
<template>
  <div class="alert">
    <!-- Dom内容 -->
    <!-- <h1 @click="close">X</h1> -->
    <div class="header">
      <h2>添加管理员</h2>
    </div>
    <ul>
      <li>
        <span>名称：</span>
        <span
          ><input
            type="text"
            placeholder="请输入名称"
            v-model="$store.state.Administrator.tjName"
        /></span>
      </li>
      <li>
        <span>手机号：</span>
        <span
          ><input
            type="text"
            placeholder="请输入手机号"
            v-model="$store.state.Administrator.tjPhone"
        /></span>
      </li>
      <li>
        <span>账号：</span>
        <span
          ><input
            type="text"
            placeholder="请输入账号"
            v-model="$store.state.Administrator.tjuser"
        /></span>
      </li>
      <li>
        <span>密码：</span>
        <span
          ><input
            type="text"
            placeholder="请输入密码"
            v-model="$store.state.Administrator.tjPass"
        /></span>
      </li>
      <li>
        <span>所属组织：</span>
        <span>
          <select name="" id="tjTissue" @click="tjTissue">
            <option value="">{{$store.state.Administrator.tjTissue}}</option>
            <option value="牛马集团">牛马集团</option>
            <option value="App集团">App集团</option>
            <option value="小一集团">小一集团</option>
          </select>
        </span>
      </li>
      <li>
        <span>所属角色：</span>
        <span>
          <select name="" id="tjRole" @click="tjRole">
            <option value="">{{$store.state.Administrator.tjRole}}</option>
            <option value="超级管理员">超级管理员</option>
            <option value="王牌管理员">王牌管理员</option>
            <option value="管理员">管理员</option>
          </select>
        </span>
      </li>
    </ul>
    <div class="btn">
      <span><button class="blue" @click="tjBtn">确定</button></span>
      <span><button @click="close">取消</button></span>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import { mapMutations, mapGetters } from "vuex";
export default {
  name: "",
  data() {
    return {
      msg: 0,
    };
  },
  components: {},
  // 计算属性
  computed: {},
  // 监听属性
  watch: {},
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getTime();
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  // Vue方法定义
  methods: {
    ...mapMutations({
      ishowAll: "Administrator/ishowAll",
      getBtn: "Administrator/getBtn",
    }),
    ...mapGetters({
      getTime: "Administrator/getTime",
    }),
    close() {
      this.ishowAll();
      //   console.log(this.$store.state.Administrator.ishow);
    },
    tjTissue() {
      this.$store.state.Administrator.tjTissue =
        document.querySelector("#tjTissue").value;
    },
    tjRole() {
      this.$store.state.Administrator.tjRole =
        document.querySelector("#tjRole").value;
    },
    tjBtn() {
      this.getBtn();
      this.$store.state.Administrator.tjName = "";
      this.$store.state.Administrator.tjPhone = "";
      this.$store.state.Administrator.tjuser = "";
      this.$store.state.Administrator.tjPass = "";
      this.$store.state.Administrator.tjTissue = "";
      this.$store.state.Administrator.tjRole = "";
      this.ishowAll();
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
*{
  padding: 0;
  margin: 0;
  list-style: none;
}
.alert {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}
ul li {
  margin: 20px 0;
}
select,
input {
  width: 222px;
  height: 30px;
  border-radius: 5px;
  border: #c0ddff 1px solid;
}
button {
  width: 100px;
  height: 36px;
  margin: 0 10px;
  /* border-width: 0ch; */
  border-radius: 3px;
  background-color: #fff;
}
.blue {
  color: #fff;
  background-color: #3894ff;
}
.btn {
  position: absolute;
  bottom: 30px;
  left: 30%;
}
</style>